@import 'styles/settings';
@import 'styles/typography-extends';
@import 'styles/ui.module';
@import 'styles/common-animations.module';

$section-padding: 0 24px;
$scrollbar-gutter: 15px;

.cardsContainer {
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  width: 100%;
  @include bottom();
  position: fixed;

  @media #{$tablet-portrait} {
    @include topLeft();
    @include animationFunction();
    width: $sidebar-width + $scrollbar-gutter;
  }
}

.delayOnIn {
  @media #{$tablet-portrait} {
    @include animationFunction($delay: 200ms);
  }
}

.scrollable {
  @media #{$tablet-portrait} {
    height: 600px; // %verticalScrollbar styles, cannot use @extend inside @media
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 4px;
      background-color: rgba($wild-sand, 0.2);
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background-color: $alto;
    }
  }
}

.card {
  @include backdropBlur();
  background-color: $brand-color-secondary;
  cursor: pointer;
  // height: 100%;

  @media #{$tablet-portrait} {
    margin-right: $scrollbar-gutter;
    margin-bottom: 5px;
    height: unset;
  }
}

.border {
  border: unset;

  @media #{$tablet-portrait} {
    border: 1px solid $white;
  }
}

.titleSection {
  padding: $section-padding;
  background-repeat: no-repeat;
  background-size: cover;
  height: 170px;
}

.descriptionSection {
  padding: $section-padding;
}

.title {
  @extend %headline;
  color: $white;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 20px;
  text-shadow: 2px 2px 8px $firefly;
}

.description {
  @extend %bodyText;
  color: white;
  padding-bottom: 50px;
  padding-top: 22px;
  margin: 0;

  @media #{$tablet-portrait} {
    margin: 14px 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.selectMapButtonContainer {
  display: flex;
  justify-content: center;
  padding-bottom: 22px;
}

.selectMapButton {
  @extend %titleMobile;
  padding: 10px 40px;
  color: $firefly;
  background-color: $robins-egg-blue;
}

.button {
  display: none;

  @media #{$tablet-portrait} {
    display: flex;
    align-items: center;
    font-size: $font-size-xxs;
    font-family: $font-family-1;
    letter-spacing: 2px;
    color: $robins-egg-blue;
    padding: 0;
    margin-left: -8px; // svg icon has some padding
    margin-bottom: 20px;
  }
}

.icon {
  transform: rotate(180deg);
  height: 25px;
}

.backButton {
  @extend %subtitle;
  margin-top: 4px;
}

.hidden {
  display: none;
}